import { useEffect, useState } from "react"
import { TreeSelect, Select } from "antd"
import { useComponentStore, Component, getComponentById } from "../../../editor/stores/components"
import { useComponentConfigStore } from "../../../editor/stores/component-config"

export interface ComponentMethodConfig {
    type: "componentMethod",
    config: {
        componentId: string,
        method: string
    }
}

export interface ComponentMethodProps{
    value?: ComponentMethodConfig["config"],
    onChange?: (config: ComponentMethodConfig) => void
}

// 接收 ComponentMethodProps 返回 ComponentMethodConfig
export function ComponentMethod(props: ComponentMethodProps){

    const { value, onChange } = props
    const { components, curComponentId } = useComponentStore()
    const { componentConfigs } = useComponentConfigStore()
    const [ selectComponent, setSelectComponent ] = useState<Component | null>()

    // 数据编辑时做回显用
    const [curId, setCurId] = useState<string>()
    const [curMethod, setCurMethod] = useState<string>()

    function componentChange(id: string){
        if (!curComponentId) return 

        setCurId(id)
        setSelectComponent(getComponentById(id, components))
    }

    function componentMethodChange(methodName){
        if (!curComponentId || !selectComponent) return;

        setCurMethod(methodName)
        onChange && onChange({
            type: "componentMethod",
            config: {
                componentId: selectComponent.id,
                method: methodName
            }
        })
    }

    useEffect(() => {
        if (!value) return
        setCurId(value.componentId)
        setCurMethod(value.method)

        setSelectComponent(getComponentById(value.componentId, components))
    }, [value])

    return (
        <div className="mt-[40px]">
            <div className="flex items-center gpa-[40px]">
                <div>组件：</div>
                <div>
                    <TreeSelect 
                        style={{width: 500, height: 50}}
                        treeData={components}
                        fieldNames={{
                            label: 'name',
                            value: 'id',
                        }}
                        value={curId}
                        onChange={componentChange}
                    />
                </div>
            </div>
            { componentConfigs[selectComponent?.name || '']?.methods && (
                <div className="flex items-center gap-[10px]">
                    <div>方法：</div>
                    <div>
                        <Select
                            style={{width: 500, height: 50}}
                            options={componentConfigs[selectComponent?.name || ''].methods?.map((item) => ({
                                label: item.label,
                                value: item.name
                            }))}
                            value={curMethod}
                            onChange={componentMethodChange}
                        />
                    </div>
                </div>
            ) }
        </div>
    )
}